<template>
  <div class="platform-course">
    <!-- 搜索和操作区 -->
    <el-card class="search-card">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input 
            v-model="searchKeyword" 
            placeholder="搜索课程名称或关键词" 
            clearable
            prefix-icon="Search"
            @keyup.enter="handleSearch"
          />
        </el-col>
        <el-col :span="4">
          <el-select v-model="courseType" placeholder="课程类型">
            <el-option label="全部" value="" />
            <el-option label="语文" value="chinese" />
            <el-option label="数学" value="math" />
            <el-option label="英语" value="english" />
            <el-option label="科学" value="science" />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select v-model="courseStatus" placeholder="课程状态">
            <el-option label="全部" value="" />
            <el-option label="已上线" value="online" />
            <el-option label="待审核" value="pending" />
            <el-option label="已下架" value="offline" />
          </el-select>
        </el-col>
        <el-col :span="8" class="text-right">
          <el-button type="primary" @click="handleAddCourse">
            <el-icon><Plus /></el-icon> 新增课程
          </el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 课程列表 -->
    <el-card class="course-table-card">
      <el-table 
        :data="courseList" 
        border
        style="width: 100%"
      >
        <el-table-column 
          prop="id" 
          label="ID" 
          width="80"
          align="center"
        />
        <el-table-column 
          prop="name" 
          label="课程名称" 
          min-width="200"
        />
        <el-table-column 
          prop="type" 
          label="课程类型" 
          width="120"
          align="center"
        />
        <el-table-column 
          prop="schoolName" 
          label="所属学校" 
          width="180"
        />
        <el-table-column 
          prop="uploadTime" 
          label="上传时间" 
          width="160"
          align="center"
        />
        <el-table-column 
          prop="status" 
          label="状态" 
          width="120"
          align="center"
        >
          <template #default="scope">
            <el-tag 
              :type="scope.row.status === 'online' ? 'success' : 
                     scope.row.status === 'pending' ? 'warning' : 'info'"
            >
              {{ scope.row.status === 'online' ? '已上线' : 
                 scope.row.status === 'pending' ? '待审核' : '已下架' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column 
          label="操作" 
          width="180"
          align="center"
        >
          <template #default="scope">
            <el-button 
              size="small" 
              type="text" 
              @click="handleView(scope.row)"
            >
              查看
            </el-button>
            <el-button 
              size="small" 
              type="text" 
              @click="handleEdit(scope.row)"
              v-if="scope.row.status !== 'online'"
            >
              编辑
            </el-button>
            <el-button 
              size="small" 
              type="text" 
              :class="scope.row.status === 'online' ? 'text-danger' : 'text-success'"
              @click="handleStatusChange(scope.row)"
            >
              {{ scope.row.status === 'online' ? '下架' : '上线' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Plus, Search } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

// 搜索条件
const searchKeyword = ref('');
const courseType = ref('');
const courseStatus = ref('');

// 分页参数
const currentPage = ref(1);
const pageSize = ref(10);
const totalCount = ref(56);

// 课程列表数据
const courseList = ref([
  {
    id: 1001,
    name: '小学一年级语文上册教学课件',
    type: '语文',
    schoolName: '阳光第一小学',
    uploadTime: '2023-09-15',
    status: 'online'
  },
  {
    id: 1002,
    name: '五年级数学思维训练',
    type: '数学',
    schoolName: '育才小学',
    uploadTime: '2023-10-02',
    status: 'pending'
  },
  {
    id: 1003,
    name: '三年级英语听力练习',
    type: '英语',
    schoolName: '实验小学',
    uploadTime: '2023-09-28',
    status: 'online'
  },
  {
    id: 1004,
    name: '科学实验指导手册',
    type: '科学',
    schoolName: '阳光第一小学',
    uploadTime: '2023-08-20',
    status: 'offline'
  }
]);

// 搜索处理
const handleSearch = () => {
  currentPage.value = 1;
  // 实际项目中这里会调用API
  console.log('搜索条件:', {
    keyword: searchKeyword.value,
    type: courseType.value,
    status: courseStatus.value
  });
};

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val;
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
};

// 操作方法
const handleAddCourse = () => {
  // 跳转到新增课程页面
  console.log('新增课程');
};

const handleView = (row) => {
  console.log('查看课程:', row);
};

const handleEdit = (row) => {
  console.log('编辑课程:', row);
};

const handleStatusChange = (row) => {
  const newStatus = row.status === 'online' ? 'offline' : 'online';
  row.status = newStatus;
  ElMessage.success(`课程已${newStatus === 'online' ? '上线' : '下架'}`);
};
</script>

<style scoped>
.platform-course {
  padding: 15px;
}

.search-card {
  margin-bottom: 15px;
  padding: 15px;
}

.course-table-card {
  padding: 15px;
}

.pagination-container {
  margin-top: 15px;
  text-align: right;
}

.text-danger {
  color: #f56c6c;
}

.text-success {
  color: #67c23a;
}
</style>